import { add_edit_department, department_select } from '@/services/department';
import { ActionType, ProForm, ProFormGroup, ProFormText } from '@ant-design/pro-components';
import { Divider, Form, message, Modal, Switch, TreeSelect } from 'antd';
import { useEffect, useState } from 'react';

interface Iprops {
  isShowAddModal: (show: boolean) => void;
  isAddModalOpen: boolean;
  actionRef: React.MutableRefObject<ActionType | undefined>;
}
type T = {
  disabled: boolean;
  status: number;
  value: number;
  id: number;
  title: string;
  name: string;
  pId: number;
  parent_id: number;
};
const AddDepartment = (props: Iprops) => {
  const { isAddModalOpen, isShowAddModal, actionRef } = props;
  // 存储科室列表
  const [departmentlist, setdepartmentlist] = useState();
  // 页面初始化，获取科室列表数据
  useEffect(() => {
    get_department_select();
  }, []);
  // 获取科室列表
  const get_department_select = async () => {
    let params = await department_select();
    params.data.map((item: T) => {
      item.disabled = item.status == 0 ? true : false;
      item.value = item.id;
      item.title = item.name;
      item.pId = item.parent_id;
    });
    setdepartmentlist(params.data);
  };
  // 新增科室
  const add_department = async (value: { name: string; department: number }) => {
    if ('status' in value) {
      var switch_status = value.status ? 1 : 0;
    } else {
      var switch_status = 1;
    }
    let request_body = {
      name: value.name,
      status: switch_status,
      parent_id: value.department,
    };
    let res: any = await add_edit_department(request_body);
    // console.log('新增科室', res);
    if (res.msg == 'ok') {
      actionRef.current?.reload();
      message.success('新增科室成功');
      get_department_select();
      isShowAddModal(false);
    } else {
      message.error(res.msg);
    }
  };
  return (
    <Modal
      title="新增科室"
      centered
      open={isAddModalOpen}
      onCancel={() => isShowAddModal(false)}
      width={350}
      destroyOnClose={true}
      footer={null}
    >
      <Divider />
      <ProForm
        onFinish={(value: { name: string; department: number }) => add_department(value)}
        submitter={{
          searchConfig: {
            submitText: '提交',
            resetText: '重置',
          },
          resetButtonProps: {
            style: {
              // 隐藏重置按钮
              display: 'block',
              position: 'absolute',
              left: 'calc(50% - 107px)',
            },
          },
          submitButtonProps: {
            style: {
              display: 'block',
              position: 'absolute',
              right: 'calc(50% - 107px)',
            },
          },
        }}
      >
        <ProFormGroup>
          <ProFormText
            width={280}
            name="name"
            label="科室名称"
            placeholder="请输入科室名称"
            rules={[
              {
                required: true,
                message: '请输入科室名称',
                validateTrigger: 'onBlur',
              },
              { pattern: /(^\S)((.)*\S)?(\S*$)/, message: '不能输入空格' },
            ]}
          />
          <Form.Item
            name="department"
            label="上级名称"
            rules={[{ required: true, message: '请选择上级' }]}
          >
            <TreeSelect
              treeDataSimpleMode
              style={{ width: '280px' }}
              treeData={departmentlist}
              placeholder="请选择上级"
              treeDefaultExpandAll
            />
          </Form.Item>
          <Form.Item name="status" label="状态" valuePropName="checked">
            <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked={true} />
          </Form.Item>
        </ProFormGroup>
        <br />
      </ProForm>
      <br />
    </Modal>
  );
};
export default AddDepartment;
